<script setup>
import {ref} from 'vue'
import axios from 'axios';
import {useRouter} from "vue-router";
import {snackbar} from './store'

let username = ref(null)
let password = ref(null)
let show = ref(null)

const router = useRouter()
const emit = defineEmits(['updateUser'])

function login(username, password) {
    axios({
        method: 'post',
        url: '/User/login',
        data: {
            username: username,
            password: password
        }
    }).then((res) => {
        if(res.data.code == 0) {
            localStorage.setItem("token", res.data.data)
            // emit("updateUser", res.data.data.userInfo)
            axios.post("/User/getUserLoginInfo", {}).then(res => {
                localStorage.setItem("ZAYY_USER_INFO", JSON.stringify(res.data.data.user))
                localStorage.setItem("ZAYY_MENU_IDS", JSON.stringify(res.data.data.permissionIds))
                axios.post("/Permission/getPermissionTreeList", {}).then(val => {
                    localStorage.setItem("ZAYY_MENU_INFO", JSON.stringify(val.data.data))
                    res.data.data.permissionIds.forEach(k => {
                        val.data.data.forEach(menu => {
                            menu.children.forEach(menuId => {
                                if(k == menuId.permissionId) {
                                    router.push('/' + menuId.icon)
                                }                                
                            }) 
                        })
                    })
                })                
            })
        } else {
            snackbar.info(res.data.message)
        }
    }, err => {
        snackbar.info(err.data.message)
    })
}
</script>

<template>
    <v-main color="background" :scrollable="true">
        <div class="main">
            <v-card style="background-color: transparent;">
                <div class="login-left">
                    <div class="title">嘉兴药品返点系统</div>
                    <img src="./assets/images/login.png" alt="">
                </div>
            </v-card>
            <v-card style="padding: 20px; border-radius: 0px 14px 14px 0px;" min-width="454" min-height="563px">
                <div class='login-title'>
                    用户登录
                    <br>
                    LOGIN
                </div>
                <v-form @submit.prevent style="padding: 16px">
                    <v-text-field
                    autocomplete="username"
                    variant="underlined"
                    v-model="username"
                    label="用户名"></v-text-field>
                    <v-text-field autocomplete="current-password" v-on:click:append="show = !show"
                    :append-icon="show ? 'mdi-eye' : 'mdi-eye-off'"
                    :type="show ? 'text' : 'password'"
                    variant="underlined"
                    v-model="password"
                    label="密码"></v-text-field>
                    <v-btn type="submit" block class="mt-2 login-btn" v-on:click="login(username,password)">立即登录</v-btn>
                </v-form>
            </v-card>
        </div>
    </v-main>
</template>

<style scoped lang="scss">
.main {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f7;
  padding: 10px;
  // background-image: url(./assets/images/bg.png);
  background-size: 100% 100%;
  .login-left {
    width: 454px;
    height: 563px;
    background-color: #08B4CE;
    border-radius: 14px 0 0 14px;
    .title {
        font-weight: 500;
        color: #fff;
        font-size: 26px;
        text-align: center;
        padding-top: 64px;
        letter-spacing: 2px;
    }
    img {
        margin-top: 48px;
        margin-left: 15px;
    }
  }
    .login-title {
        color: #4D7ABE;
        font-size: 20px;
        text-align: center;
        margin-top: 69px;
        font-weight: 700;
        letter-spacing: 2px;
    }
}
.login-btn {
    background-color: #3B90FB;
    color: #fff;
    height: 50px;
}
</style>
